// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.notification-action-button {
  @_notification: notification-popup-item;
  @_icon-width: 32px;

  .reset-input();
  .center-content();

  height: 100%;
  color: @osu-colour-f1;
  pointer-events: initial;

  &:hover {
    color: #fff;
  }

  &--fancy {
    padding-left: @border-radius-large;
    border-radius: 0 @border-radius-large @border-radius-large 0;
    position: relative;

    &:hover {
      background-color: fade(black, 15%);
    }

    &::before {
      .full-size();
      content: "";
      width: @border-radius-large;
      border-radius: 0 @border-radius-large @border-radius-large 0;
      background-color: transparent;

      .@{_notification}:hover & {
        background-color: @osu-colour-b1;
      }

      .@{_notification}--compact:hover & {
        background-color: @osu-colour-b4;
      }

      .@{_notification}--group:hover & {
        background-color: @osu-colour-b2;
      }
    }
  }

  &__icon {
    .center-content();
    height: 100%;
    width: @_icon-width;
  }
}
